<template>
  <el-dialog v-model="dialogVisible" title="额度统计" width="80%" :before-close="handleClose">
    <div class="style-box">
      <div v-for="item in cardTypeList.data" :key="item.id" style="width: 50%;margin-bottom: 10px">
        <span style="font-weight: bold;font-size: 18px;margin-bottom: 6px">{{item.cnName}}</span>
        <div style="margin: 10px 0">
          <span style="font-weight: bold;font-size: 16px">总额度:{{item.accumulateCertNum}}</span>
          <span style="font-weight: bold;font-size: 16px;margin: 0 10px">使用额度:{{item.usedCertNum}}</span>
          <span style="font-weight: bold;font-size: 16px">剩余额度:{{item.certNum}}</span>
        </div>
        <div style="width: 70%">
          <el-progress :text-inside="true" :stroke-width="30" :percentage="numAll(item.accumulateCertNum,item.certNum)" />
        </div>
      </div>
    </div>
  </el-dialog>
  
  
  
</template>

<script setup>
import { ref,reactive } from 'vue'
import {_getCardTypeSet} from "../../http/api.js";
import {ElLoading} from "element-plus";

const props = defineProps({
  id:String
})
const $emit = defineEmits(['quotaClose'])
const dialogVisible = ref(true);
const cardTypeList = reactive({
  data:[]
})
const statusArr = ['success','exception','warning'];


//统计
const numAll = (all,residue) => {
  if(all && all != 0) {
    // 计算百分比完成度
    let percentageComplete = (residue / all) * 100;
// 将结果四舍五入到小数点后两位
    console.log(Math.round(percentageComplete * 100) / 100);
    return Math.round(percentageComplete * 100) / 100;
  }else {
    return 0
  }

}
//
// 获取用户对应证件列表
const getCardTypeSet = () => {
  const loading = ElLoading.service({lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.7)'});
  _getCardTypeSet(props.id)
      .then(res => {
        console.log(res);
        loading.close();
        if(res.data.ok) {
          let list = res.data.data;
          cardTypeList.data = list;
          console.log(cardTypeList.data);
        }
      })
      .catch(err => {
        console.log(err);
        loading.close();
      })
}
getCardTypeSet();

//关闭
const handleClose = () => {
  $emit('quotaClose')
}
</script>

<style scoped lang="scss">
.style-box{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 0 30px;
}
</style>